<template>
  <router-view v-slot="{ Component, route }">
    <transition
      mode="out-in"
      appear
      enter-from-class="translate-x--30 opacity-0 duration-300"
      leave-to-class="translate-x-30 opacity-0 duration-300"
    >
      <keep-alive :include="keepAliveNames">
        <component
          :is="Component"
          v-if="app.reloadFlag"
          :key="route.fullPath"
          class="transition ease-in-out bg-#f6f9f8 dark:bg-#101014 h-full p-16"
        />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script setup lang="ts">
import { useAppStore } from "@/store";
import { viewOptions } from "@/views";

const app = useAppStore();

const keepAliveNames = computed(() =>
  viewOptions
    .filter((ops) => ops.value !== app.reloadComponentName)
    .map((ops) => ops.value)
);
</script>
